<template>
	<view class="container">
		<view>
			<!-- <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view id="demo1" class="scroll-view-item_H uni-bg-red"> <image src="../../static/image/banner/banner1.png" class="banerImg" mode="aspectFit"></image> </view>
				<view id="demo2" class="scroll-view-item_H uni-bg-green"><image src="../../static/image/banner/banner2.png" class="banerImg" mode="aspectFit"></image></view>
			</scroll-view> -->
			<uni-swiper-dot :info="info" :current="current" field="content" :dotsStyles="dotsStyles" :mode="mode">
				<swiper class="swiper-box" @change="change" :autoplay="true" :circular="true">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view class="swiper-item"><image :src="item.content" class="banerImg" mode="aspectFit"></image></view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="announcement">
			<swiper class="swiper" :indicator-dots="false" :vertical="true" :autoplay="true" :circular="true">
				<swiper-item><view class="swiper-item uni-bg-red">关于USDT ERC20节点升级的通知</view></swiper-item>
				<swiper-item><view class="swiper-item uni-bg-green">关于USDT ERC20节点升级的通知B</view></swiper-item>
				<swiper-item><view class="swiper-item uni-bg-blue">关于USDT ERC20节点升级的通知C</view></swiper-item>
			</swiper>
		</view>
		<view class="cmd-box">
			<view class="cmd-flex">
				<view class="cmd-left">
					<image src="../../static/image/icon/hnw-logo@2x.png" mode=""></image>
					<text>
						<text class="HNW">HNW</text>
						<text class="USDT">/USDT</text>
					</text>
				</view>
				<view class="cmd-right">
					<view>
						<view class="cmd-top">0.888</view>
						<view class="cmd-bot">+1.65%</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cmt-flex">
			<view class="cmd-box">
				<view class="cmd-flex">
					<navigator url="../subpage/exchange" open-type="navigate" class="cmd-left">
					
							<image src="../../static/image/icon/shandui.png" class="imgs" mode=""></image>
							<view>
								<view class="duihuan1">闪电兑换</view>
								<view class="duihuan2">支持HNW、USDT兑换</view>
							</view>
					
					</navigator>
				</view>
			</view>
			<view class="cmd-box cmt-right" style="margin-left: 0;">
				<view class="cmd-flex">
					<view class="cmd-right">
						<image src="../../static/image/icon/quanxinzhong.png" mode=""></image>
						<view><view class="zhongchou">众筹</view></view>
					</view>
				</view>
			</view>
		</view>
		<view class="cmd-box invite">
			<view class="inviteText">邀请好友使用</view>
			<view class="share-it">获得分享收益</view>
		</view>
		<view class="cmt-flex">
			<view class="cmd-box">
				<view class="cmd-flex" style="height: 146rpx;">
					<view class="cmd-left">
						<image src="../../static/image/icon/Fill-1.png" class="imgs" mode=""></image>
						<view>
							<view class="duihuan1">充值</view>
							<view class="duihuan2">支持HNW、USDT充值</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cmt-right " style="margin-left: 0;">
				<view class="cmd-flex-top cmd-box" style="margin-left: 0;">
					<image src="../../static/image/icon/Clip.png" mode=""></image>
					<view><view class="zhuan">转账</view></view>
				</view>
				<view class="cmd-flex-bot cmd-box" style="margin-left: 0;">
					<image src="../../static/image/icon/Fill.png" mode=""></image>
					<view><view class="tiBi">提币</view></view>
				</view>
			</view>
		</view>
		<view class="cmd-box cmt-flex-list">
			<view class="cmd-list cmd-list_1">
				<view class="cmd-list_bi">
					<text class="left">654</text>
					<text class="right">HNE</text>
				</view>
				<view class="cmd-list_tit">解锁收益</view>
			</view>
			<view class="cmd-list cmd-list_2">
				<view class="cmd-list_bi">
					<text class="left">654</text>
					<text class="right">HNE</text>
				</view>
				<view class="cmd-list_tit">交易收益</view>
			</view>
			<view class="cmd-list cmd-list_3">
				<view class="cmd-list_bi">
					<text class="left">654</text>
					<text class="right">HNE</text>
				</view>
				<view class="cmd-list_tit">分享收益</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue';

let banner1 = '../../static/image/banner/banner1.png';
let banner2 = '../../static/image/banner/banner2.png';
export default {
	components: { uniSwiperDot },
	data() {
		return {
			scrollTop: 0,
			info: [
				{
					content: banner1
				},
				{
					content: banner2
				}
			],
			current: 0,
			mode: 'round',
			dotsStyles: {
				width: 8,
				color: 'red',
				backgroundColor: '#B6B6B6',
				border: '#B6B6B6',
				selectedBackgroundColor: '#D8D8D8',
				selectedBorder: '#D8D8D8',
				bottom: 20
			}
		};
	},
	methods: {
		scroll: function(e) {
			console.log(e);
			this.scrollTop = e.detail.scrollTop;
		},
		change(e) {
			this.current = e.detail.current;
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #f6f6f6;
	height: auto;
	overflow: hidden;
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		.scroll-view-item_H {
			display: inline-block;
			width: 100%;
			height: 456rpx;
			line-height: 165px;
			text-align: center;
			font-size: 19px;
		}
	}
	.swiper-box {
		height: 430rpx;
	}
	.banerImg {
		width: 100% !important;
		height: 450rpx;
	}
	.announcement {
		color: #e34444;
		font-size: 26rpx;
		padding-left: 60rpx;
		background-image: url(../../static/image/gonggao.png);
		background-repeat: no-repeat;
		background-position: 0 center;
		background-size: 36rpx 34rpx;
		line-height: 100rpx;
		margin: 0 48rpx;
		// background-color: #F6F6F6;
		.swiper {
			height: 100rpx;
		}
	}
	.cmt-flex {
		display: flex;
		.cmt-right {
			flex: auto;
			.cmd-flex-top,
			.cmd-flex-bot {
				background-color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				font-size: 20rpx;
				color: #333333;
				height: 64rpx;
				padding: 0 40rpx;
				image {
					width: 38rpx;
					height: 30rpx;
				}
			}
			.cmd-flex-top {
				margin-bottom: 16rpx;
			}
		}
		.cmd-right {
			justify-content: end !important;
		}
	}
	.cmd-box {
		margin: 0 24rpx 24rpx 24rpx;
		padding: 0 40rpx;
		border-radius: 8rpx;
		color: #474747;
		background-color: #ffffff;
	}
	.cmd-flex {
		display: flex;
		justify-content: space-between;
		height: 128rpx;

		.cmd-left {
			display: flex;
			align-items: center;
			width: 356rpx;
			image {
				width: 52rpx;
				height: 52rpx;
				margin-right: 20rpx;
			}
			.imgs {
				width: 72rpx;
				height: 72rpx;
			}
			.USDT {
				font-size: 20rpx;
			}
			.HNW {
				font-size: 30rpx;
				font-weight: bold;
			}
			.duihuan1 {
				color: #333333;
				font-size: 28rpx;
			}
			.duihuan2 {
				color: #999999;
				font-size: 22rpx;
			}
		}
		.cmd-right {
			display: flex;
			align-items: center;

			justify-content: flex-end;
			image {
				width: 56rpx;
				height: 56rpx;
				margin-right: 20rpx;
			}
			.zhongchou {
				font-size: 28rpx;
			}

			.cmd-top {
				font-size: 32rpx;
			}
			.cmd-bot {
				color: #d92121;
				font-size: 22rpx;
			}
		}
	}

	.invite {
		height: 120rpx;
		background: url(../../static/image/icon/banner2@2x.png) no-repeat;
		background-size: 100% 100%;
		.inviteText {
			color: #ffffff;
			font-size: 30rpx;
			padding-top: 13px;
		}
		.share-it {
			color: #ffffff;
			font-size: 20rpx;
		}
	}
	.cmt-flex-list {
		display: flex;
		justify-content: space-between;
		padding: 24rpx;
		.cmd-list {
			width: 198rpx;
			height: 214rpx;
			view {
				background-size: 100% 100%;
			}
		}
		.cmd-list_1 {
			color: #042e6a;
			background-size: 100% 100%;
			background-image: url(../../static/image/icon/jssy.png);
		}
		.cmd-list_2 {
			color: #03463f;
			background-size: 100% 100%;
			background-image: url(../../static/image/icon/jysy.png);
		}
		.cmd-list_3 {
			color: #7d0b0b;
			background-size: 100% 100%;
			background-image: url(../../static/image/icon/fxsy.png);
		}
		.cmd-list_bi {
			margin: 32rpx 0 36rpx 40rpx;

			.left {
				font-size: 36rpx;
			}
			.right {
				font-size: 18rpx;
			}
		}
		.cmd-list_tit {
			font-size: 28rpx;
			text-align: center;
		}
	}
}
</style>
